<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <!-- v-model的三个修饰符，
     lazy: 失去焦点后再收集数据
     number: 输入字符串转为有效的数字
     trim: 过滤输入的首尾空格
     -->

    <div id="root">
      <!-- 这里不需要action，与后端接口交互     可设置事件后修饰符 prevent 避免默认行为 -->
      <form @submit.prevent="submit">
        <!-- 1：基础的数据绑定，使用v-model可直接绑定，因为可以收集value值 -->
        <!-- 关联标签提升观感，当点击label中的内容时，焦点会移动到fro指定的标签 -->
        <label for="demo">账号: </label>
        <input type="text" id="demo" v-model="userInfo.userName" />
        <br />
        <label for="password">密码: </label>
        <input type="text" id="password" v-model="userInfo.passWord" />
        <br />
        <!-- type后的number可指定输入的数值，v-model后的number可指定绑定的数据是数值 -->
        <label for="age">年龄: </label>
        <input type="number" id="age" v-model.number="userInfo.age" />
        <br />

        <!-- 2：单选框默认不会收集Value，所以需手动添加Value收集，以实现双向绑定，可以在data中指定默认勾选 -->
        <!-- 性别单选框，用同一个name可控制单选 -->
        性别: 男<input
          type="radio"
          name="sex"
          v-model="userInfo.sex"
          value="male"
        />
        女<input
          type="radio"
          name="sex"
          v-model="userInfo.sex"
          value="female"
        />
        <br />

        <!-- 3：多选框默认操作checked属性，也需要手动设置Value，并且同时绑定一个数组对象，每个选框都单独收集 -->
        爱好: 学习<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="study"
        />
        打游戏<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="playGame"
        />
        看电影<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="watchMovie"
        />
        <br />

        <!-- 4：下拉框比较简单，只需要在select标签处添加绑定即可，并且可默认指定 -->
        所属校区
        <select v-model="userInfo.selectAddress">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br />

        <!-- 5：其他信息直接绑定即可 -->
        其他信息:
        <textarea v-model="userInfo.otherMsg"></textarea>
        <br />

        <!-- 6：单个的复选框场景，不需要再设置value -->
        <input type="checkbox" v-model="userInfo.agree" /> 阅读并接受
        <a href="www.atguigu.com">用户协议</a>
        <br />

        <!-- 7：默认点击提交，会触发表单提交，然后刷新页面    可以给按钮或表单设置事件来禁止默认行为 -->
        <button>提交</button>
      </form>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        //创建一个对象接收表单数据
        userInfo: {
          userName: "",
          passWord: "",
          age: "",
          sex: "",
          //注意，多选框数据绑定不仅需要加value，还必须绑定一个数组才能区分
          hobby: [],
          selectAddress: "beijing",
          otherMsg: "",
          agree: "",
        },
      },
      methods: {
        submit() {
          console.log("提交");
        },
      },
    });
  </script>
</html>
